<template>
  <div class="mine-body">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-button round type="primary" plain>
            <van-icon name="contact" size="18" />
            客服
          </van-button>
          <router-link to="/myset">
            <van-button round type="info" plain>
              <van-icon name="edit" size="18" />
              设置
            </van-button>
          </router-link>
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 主体内容 -->
    <div class="mine-contanier">
      <!-- 1.头像块 -->
      <van-cell-group inset>
        <van-cell to="/login">
          <template #title>
            <van-image round width="100" height="100" :src="img" />
          </template>
          <template #label>
            {{ msg }}
          </template>
        </van-cell>
        <van-cell title="优惠券" value="内容" is-link />
      </van-cell-group>
      <!-- 2.购物车 -->
      <div class="main-cart">
        <van-row type="flex" justify="space-around" class="cart_collection">
          <van-col span="5">
            <router-link to="/cart">
              <p><van-icon name="shopping-cart-o" />购物车</p>
            </router-link>
          </van-col>
          <van-col span="5">
            <router-link to="/mycollect">
              <p><van-icon name="star-o" />我的收藏</p>
            </router-link>
          </van-col>
          <van-col span="5">
            <router-link to="#">
              <p><van-icon name="send-gift-o" />我的足迹</p>
            </router-link>
          </van-col>
          <van-col span="5">
            <router-link to="#">
              <p><van-icon name="pending-payment" />红包卡券</p>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <!-- 3.贷款广告 -->
      <div class="main-tag">
        <van-row type="flex" justify="space-around" class="sameLayout1">
          <van-col span="4">
            <router-link to="#">
              <p>
                <span style="font-size: 18px">5000</span>元<br /><span>美团借钱</span>
              </p>
            </router-link>
          </van-col>
          <van-col span="4">
            <router-link to="#">
              <p>
                <span style="font-size: 18px"> <van-icon badge="1" />1 </span
                >个特权<br /><span>未领取</span>
              </p>
            </router-link>
          </van-col>
          <van-col span="4">
            <router-link to="#">
              <p><van-icon name="credit-pay" />信用卡额度</p>
            </router-link>
          </van-col>
          <van-col span="4">
            <router-link to="#">
              <p><van-icon name="cash-on-deliver" />数字人民币</p>
            </router-link>
          </van-col>
          <van-col span="4">
            <router-link to="#">
              <p><van-icon name="pending-payment" />我的钱包</p>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <!-- 4.彩色的广告区域 -->
      <div class="main-color">
        <van-row type="flex" justify="space-around">
          <van-col span="4">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huafubing"></use>
            </svg>
            <p>领话费</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-lvhanghuafei"></use>
            </svg>
            <p>提现100元</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-she"></use>
            </svg>
            <p>贪吃蛇</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-juzishu"></use>
            </svg>
            <p>免费领水果</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-cantingxiaofei"></use>
            </svg>
            <p>小美餐厅</p>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-a-17-01"></use>
            </svg>
            <p>种红包</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tiantianquan"></use>
            </svg>
            <p>爱消除</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-qianbao"></use>
            </svg>
            <p>福利中心</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jianzhu_louceng"></use>
            </svg>
            <p>盖楼赚钱</p>
          </van-col>
          <van-col span="4"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tianfuluo"></use>
            </svg>
            <p>美团小镇</p>
          </van-col>
        </van-row>
      </div>
      <!-- 5.推荐商品块 -->
      <div class="main-product">
        <van-sticky>
          <!-- 下拉刷新 -->
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <p class="main-replay">
              推荐商品
              <van-icon name="replay" />
            </p>
            <template>
              <!-- 每个元素的两侧间隔相等 -->
              <van-row type="flex">
                <van-col span="11" v-for="proitem in dataMinelist" :key="proitem.id">
                  <!-- 每一个列项 -->
                  <van-card
                    num="1"
                    tag="推荐"
                    :price="proitem.price"
                    :desc="proitem.detail"
                    :title="proitem.product"
                    :thumb="proitem.picture"
                    :origin-price="proitem.oldprice"
                    @click="getDetail(proitem.id)"
                  >
                  </van-card>
                  <div class="main-collect">
                    <div @click="lookCollect">
                      <van-button type="primary">查看收藏</van-button>
                    </div>
                    <div @click="updateCollect(proitem.id)">
                      <van-icon name="star-o" />
                    </div>
                  </div>
                </van-col>
              </van-row>
            </template>
          </van-pull-refresh>
        </van-sticky>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <Buttom-Tabbar></Buttom-Tabbar>
    <router-view />
  </div>
</template>
<script>
import "@/assets/font-lp/iconfont.js";
import { requestProductList } from "@/api/homelx/product";
import { requestNewproOne } from "@/api/newpro.js";

export default {
  data() {
    return {
      img:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdnimg103.lizhi.fm%2Faudio_cover%2F2020%2F02%2F17%2F2788975123960586759_320x320.jpg&refer=http%3A%2F%2Fcdnimg103.lizhi.fm&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659230350&t=b2ffb2102ed5cc4342a2224f748353ed",
      msg: "点击登录",
      dataMinelist: [],
      isLoading: false,
    };
  },
  computed: {
    User() {
      return this.$store.getters.getUser;
    },
  },
  created() {
    this.onMineProductlist(20, 1);
    if (this.User.nick) {
      this.msg = this.User.nick;
      this.img = this.User.headerimg;
    }
  },
  methods: {
    lookCollect() {
      this.$router.push({ path: "/mycollect" });
    },
    getDetail(id) {
      this.$router.push({ path: `/detail?id=${id}` });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    async onMineProductlist(r1, random) {
      let res = await requestProductList(r1, random);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        this.dataMinelist = resultInfo.list;
      }
    },
    // 一个方法
    async onRequestOne(id) {
      let res = await requestNewproOne(id);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        return resultInfo;
      }
    },
    // 一个点击收藏
    async updateCollect(id) {
      console.log("ddd收藏>>>", "id=", id); //加入收藏
      let resOne = await this.onRequestOne(id);
      let collectionList = this.$store.getters.collectionList;
      let oldpro = collectionList.find((item) => item.id == id);
      if (oldpro) {
        this.$store.dispatch("deleteCollection", oldpro.id);       
        this.$toast.success("取消收藏");
      } else {
        let product = {
          id: resOne.id,
          name: resOne.product,
          price: resOne.price,
          oldPrice: resOne.oldprice,
          url: resOne.picture,
          desc: resOne.detail,
          num: 1,
          state: false,
        };
        this.$store.dispatch("addCollection", product);
        this.$toast.success("添加收藏" + id);
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        let random = Math.floor(Math.random() * 9 + 1);
        console.log("随机数random>>>", random);
        this.onMineProductlist(10, random);
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("@/assets/css/base.css");
a {
  color: #000;
}
.icon {
  width: 1.8em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.mine-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   主体内容
  .mine-contanier {
    flex-grow: 1;
    overflow: auto;
    background-color: rgb(187, 183, 183);

    .van-cell-group {
      width: 95%;
      margin: 0px auto;
      border: 1px solid rgb(187, 183, 183);
      border-radius: 10px;
    }
    .van-cell__label {
      color: red;
      font-size: 18px;
    }
  }
  // 购物车&收藏夹
  .main-cart {
    padding-top: 10px;
    background: white;
    width: 98%;
    margin: 10px auto;
    border: 1px solid rgb(187, 183, 183);
    border-radius: 20px;

    .cart_collection {
      line-height: 40px;
      display: flex;
      justify-content: space-evenly;
      border-radius: 5px;
      background: white;
      margin-bottom: 10px;

      p {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    .van-icon {
      text-align: center;
      font-size: 24px;
      color: rgb(242, 194, 135);
    }
  }
  // <!-- 贷款广告 -->
  .main-tag {
    background: white;
    width: 98%;
    margin: 10px auto;
    border: 1px solid rgb(187, 183, 183);
    border-radius: 20px;
    .sameLayout1 {
      height: 100px;
      font-size: 14px;
      background: white;
      border-radius: 5px;
      display: flex;
      align-items: center;
      p {
        font-size: 12px;
      }
    }
    .van-icon {
      text-align: center;
      font-size: 24px;
      color: rgb(242, 194, 135);
    }
  }
  // 广告区域
  .main-color {
    padding-top: 10px;
    background: white;
    width: 98%;
    margin: 10px auto;
    border: 1px solid rgb(187, 183, 183);
    border-radius: 20px;
  }
  // 下拉刷新
  .main-replay {
    text-align: center;
  }
  //收藏事件
  .main-collect {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .van-card__price {
    color: red;
  }
  .van-card__thumb {
    margin: 0px auto;
    width: 150px;
    height: 150px;
  }
  .van-card {
    border-radius: 22px;
  }
  .van-card__header {
    flex-direction: column;
  }
  .van-col--11 {
    margin: 6px;
  }
}
</style>
